<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="apple-mobile-web-app-capable" content="yes" />
		<meta name="apple-touch-fullscreen" content="yes" />
		<meta name="format-detection" content="telephone=no"/>
		<meta name="apple-mobile-web-app-status-bar-style" content="black" /> 
		<meta name="msapplication-tap-highlight" content="no" />
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, width=device-width, viewport-fit=cover" />
		<title>启蒙优选-会员中心</title>
		<link rel="stylesheet" href="__TMPL__/home/public/assets/css/style.css?v=072206" />
		<link rel="stylesheet" href="__TMPL__/home/public/assets/css/swiper.min.css">
	</head>
	<style>
		.leavelBox{color:#afafaf;font-size:.45rem;text-align: center;margin-top: .3rem;}
	</style>
	<body>
		<!-- 会员中心 --> 
		<div class="memberIndex">
			<div class="content">
				<div class="bgText">QI MENG YOU XUAN</div>
				<div class="memberInfo">
					<img src="{$info.logo}" alt="">
					<p>{$info.nickname}</p>
					<span>
						<if condition="$info.grade eq 1">
							普通会员
						<elseif condition="$info.grade eq 2"/>
							顾问
						<elseif condition="$info.grade eq 3"/>
							星级顾问
						<elseif condition="$info.grade eq 4"/>
							联合创始人
						</if>
					</span>
					<div class="leavelBox">等级每五分钟刷新一次</div>
				</div>

				<!-- 普通会员 -->
				<if condition="$info.grade eq 1">
					<div class="memberContent">
					<h3>升级享权益</h3>
					<div class="rights flex juscbtween">
						<div class="item">
							<img src="__TMPL__/home/public/assets/img/member/icon1.png" alt="">
							<p>自购返利</p>
							<span>奖学金高至60%</span>
						</div>
						<div class="item">
							<img src="__TMPL__/home/public/assets/img/member/icon2.png" alt="">
							<p>推荐返利</p>
							<span>佣金高至60%</span>
						</div>
						<div class="item">
							<img src="__TMPL__/home/public/assets/img/member/icon3.png" alt="">
							<p>共学社群</p>
							<span>权威专家入群分享</span>
						</div>
					</div>
					<h3>晋升进度</h3>
					<div class="progressList">
						<div class="item flex juscbtween">
							<div class="left">
								<h4>绑定专属邀请人</h4>
								<div class="progressBox flex alitemCenter">
									<div class="progress">
										<p style="max-width:100%;width:<php>echo $info['after_1'] * 100;</php>%"></p>
									</div>
									<span>{$info.after_1}人</span>
								</div>
							</div>
							<if condition="$info.after_1 eq 0">
								<a href="/my_team">
									<button class="nohave">去绑定</button>
								</a>
							<else/>	
								<button class="have">已完成</button>
							</if>
						</div>
						<div class="item flex juscbtween">
							<div class="left">
								<h4>累计购课金额满0.01元</h4>
								<div class="progressBox flex alitemCenter">
									<div class="progress">
										<p style="max-width:100%;width:<php>echo $info['after_2'] * 10000;</php>%"></p>
									</div>
									<span>{$info.after_2}/0.01（元）</span>
								</div>
							</div>
							<if condition="$info.after_2 lt 99">
								<a href="/"><button class="nohave">去购课</button></a>
							<else/>	
								<button class="have">已完成</button>
							</if>
							
						</div>
					</div>
					<!-- <a href="" class="gotoupgrade">去升级</a> -->
					</div>

				<elseif condition="$info.grade eq 2"/>

					<div class="memberContent">
					<h3>会员权益</h3>
					<div class="rightsContent">
						<table>
							<thead>
								<tr>
									<th></th>
									<th>顾问</th>
									<th>星级顾问</th>
									<th>联合创始人</th>
								</tr>
							</thead>
							<tbody>
								<tr>
									<td align="left">自购返利</td>
									
									<foreach name="$info.line_1" item="vo">
										<if condition ="$vo eq 1">
											<td><img src="__TMPL__/home/public/assets/img/member/iconHave.png" alt=""></td>
										<else />	
											<td><img src="__TMPL__/home/public/assets/img/member/iconNohave.png" class="smail" alt=""></td>
										</if>
									</foreach>		
									
								</tr>
								<tr>
									<td align="left">分享返利</td>
									<foreach name="$info.line_2" item="vo">
										<if condition ="$vo eq 1">
											<td><img src="__TMPL__/home/public/assets/img/member/iconHave.png" alt=""></td>
										<else />	
											<td><img src="__TMPL__/home/public/assets/img/member/iconNohave.png" class="smail" alt=""></td>
										</if>
									</foreach>	
								</tr>
								<tr>
									<td align="left">共学社群</td>
									<foreach name="$info.line_3" item="vo">
										<if condition ="$vo eq 1">
											<td><img src="__TMPL__/home/public/assets/img/member/iconHave.png" alt=""></td>
										<else />	
											<td><img src="__TMPL__/home/public/assets/img/member/iconNohave.png" class="smail" alt=""></td>
										</if>
									</foreach>	
								</tr>
								<tr>
									<td align="left">管理奖励</td>
									<foreach name="$info.line_4" item="vo">
										<if condition ="$vo eq 1">
											<td><img src="__TMPL__/home/public/assets/img/member/iconHave.png" alt=""></td>
										<else />	
											<td><img src="__TMPL__/home/public/assets/img/member/iconNohave.png" class="smail" alt=""></td>
										</if>
									</foreach>	
								</tr>
								<tr>
									<td align="left">培育奖励</td>
									<foreach name="$info.line_5" item="vo">
										<if condition ="$vo eq 1">
											<td><img src="__TMPL__/home/public/assets/img/member/iconHave.png" alt=""></td>
										<else />	
											<td><img src="__TMPL__/home/public/assets/img/member/iconNohave.png" class="smail" alt=""></td>
										</if>
									</foreach>	
								</tr>
								<tr>
									<td align="left">分红奖励</td>
									<foreach name="$info.line_6" item="vo">
										<if condition ="$vo eq 1">
											<td><img src="__TMPL__/home/public/assets/img/member/iconHave.png" alt=""></td>
										<else />	
											<td><img src="__TMPL__/home/public/assets/img/member/iconNohave.png" class="smail" alt=""></td>
										</if>
									</foreach>	
								</tr>
							</tbody>
						</table>
					</div>
					<h3>晋升进度</h3>
					<div class="progressList">
						<div class="item flex juscbtween">
							<div class="left">
								<h4>直邀顾问</h4>
								<div class="progressBox flex alitemCenter">
									<div class="progress">
										<p style="max-width:100%;width:<php>echo $info['after_1'] * 10;</php>%"></p>
									</div>
									<span>{$info.after_1}/10（人）</span>
								</div>
							</div>
							<if condition="$info.after_1 lt 10">
								<button class="nohave shareMaskShow">去邀请</button>
							<else/>	
								<button class="have">已完成</button>
							</if>
							
						</div>

						<div class="item flex juscbtween">
							<div class="left">
								<h4>团队顾问</h4>
								<div class="progressBox flex alitemCenter">
									<div class="progress">
										<p style="max-width:100%;width:<php>echo $info['after_2'] * 5;</php>%"></p>
									</div>
									<span>{$info.after_2}/20（人）</span>
								</div>
							</div>
							<if condition="$info.after_2 lt 20">
								<button class="nohave shareMaskShow">去邀请</button>
							<else/>	
								<button class="have">已完成</button>
							</if>
							
							
						</div>

						<!--<div class="item flex juscbtween">
							<div class="left">
								<h4>团队付费5元以上会员</h4>
								<div class="progressBox flex alitemCenter">
									<div class="progress">
										<p style="max-width:100%;width:<php>echo $info['after_3'] * 2;</php>%"></p>
									</div>
									<span>{$info.after_3}/50（人）</span>
								</div>
							</div>
							<if condition="$info.after_3 lt 50">
								<button class="nohave shareMaskShow">去邀请</button>
							<else/>	
								<button class="have">已完成</button>
							</if>
						</div>--->

						<div class="item flex juscbtween">
							<div class="left">
								<h4>个人推广收益</h4>
								<div class="progressBox flex alitemCenter">
									<div class="progress">
										<p style="max-width:100%;width:<php>echo $info['after_4'] / 30 * 100;</php>%"></p>
									</div>
									<span>{$info.after_4}/30（元）</span>
								</div>
							</div>

							<if condition="$info.after_4 lt 30">
								<a href="/"><button class="nohave">去分享</button></a>
							<else/>	
								<button class="have">已完成</button>
							</if>
						</div>
						
					</div>

				<elseif condition="$info.grade eq 3"/>
					<div class="memberContent">
					<h3>会员权益</h3>
					<div class="rightsContent">
						<table>
							<thead>
								<tr>
									<th></th>
									<th>顾问</th>
									<th>星级顾问</th>
									<th>联合创始人</th>
								</tr>
							</thead>
							<tbody>
								<tr>
									<td align="left">自购返利</td>
									
									<foreach name="$info.line_1" item="vo">
										<if condition ="$vo eq 1">
											<td><img src="__TMPL__/home/public/assets/img/member/iconHave.png" alt=""></td>
										<else />	
											<td><img src="__TMPL__/home/public/assets/img/member/iconNohave.png" class="smail" alt=""></td>
										</if>
									</foreach>		
									
								</tr>
								<tr>
									<td align="left">分享返利</td>
									<foreach name="$info.line_2" item="vo">
										<if condition ="$vo eq 1">
											<td><img src="__TMPL__/home/public/assets/img/member/iconHave.png" alt=""></td>
										<else />	
											<td><img src="__TMPL__/home/public/assets/img/member/iconNohave.png" class="smail" alt=""></td>
										</if>
									</foreach>	
								</tr>
								<tr>
									<td align="left">共学社群</td>
									<foreach name="$info.line_3" item="vo">
										<if condition ="$vo eq 1">
											<td><img src="__TMPL__/home/public/assets/img/member/iconHave.png" alt=""></td>
										<else />	
											<td><img src="__TMPL__/home/public/assets/img/member/iconNohave.png" class="smail" alt=""></td>
										</if>
									</foreach>	
								</tr>
								<tr>
									<td align="left">管理奖励</td>
									<foreach name="$info.line_4" item="vo">
										<if condition ="$vo eq 1">
											<td><img src="__TMPL__/home/public/assets/img/member/iconHave.png" alt=""></td>
										<else />	
											<td><img src="__TMPL__/home/public/assets/img/member/iconNohave.png" class="smail" alt=""></td>
										</if>
									</foreach>	
								</tr>
								<tr>
									<td align="left">培育奖励</td>
									<foreach name="$info.line_5" item="vo">
										<if condition ="$vo eq 1">
											<td><img src="__TMPL__/home/public/assets/img/member/iconHave.png" alt=""></td>
										<else />	
											<td><img src="__TMPL__/home/public/assets/img/member/iconNohave.png" class="smail" alt=""></td>
										</if>
									</foreach>	
								</tr>
								<tr>
									<td align="left">分红奖励</td>
									<foreach name="$info.line_6" item="vo">
										<if condition ="$vo eq 1">
											<td><img src="__TMPL__/home/public/assets/img/member/iconHave.png" alt=""></td>
										<else />	
											<td><img src="__TMPL__/home/public/assets/img/member/iconNohave.png" class="smail" alt=""></td>
										</if>
									</foreach>	
								</tr>
							</tbody>
						</table>
					</div>
					<h3>晋升进度</h3>
					<div class="progressList">
						<div class="item flex juscbtween">
							<div class="left">
								<h4>直邀星级顾问</h4>
								<div class="progressBox flex alitemCenter">
									<div class="progress">
										<p style="max-width:100%;width:<php>echo $info['after_1'] * 10;</php>%"></p>
									</div>
									<span>{$info.after_1}/10（人）</span>
								</div>
							</div>
							<if condition="$info.after_1 lt 10">
								<button class="nohave shareMaskShow">去邀请</button>
							<else/>	
								<button class="have">已完成</button>
							</if>
							
						</div>

						<div class="item flex juscbtween">
							<div class="left">
								<h4>团队顾问</h4>
								<div class="progressBox flex alitemCenter">
									<div class="progress">
										<p style="max-width:100%;width:<php>echo $info['after_2'] * 0.33;</php>%"></p>
									</div>
									<span>{$info.after_2}/300（人）</span>
								</div>
							</div>
							<if condition="$info.after_2 lt 200">
								<button class="nohave shareMaskShow">去邀请</button>
							<else/>	
								<button class="have">已完成</button>
							</if>
							
							
						</div>

						<!--<div class="item flex juscbtween">
							<div class="left">
								<h4>团队付费5元以上会员</h4>
								<div class="progressBox flex alitemCenter">
									<div class="progress">
										<p style="max-width:100%;width:<php>echo $info['after_3'] / 800 * 100;</php>%"></p>
									</div>
									<span>{$info.after_3}/800（人）</span>
								</div>
							</div>
							<if condition="$info.after_3 lt 800">
								<button class="nohave shareMaskShow">去邀请</button>
							<else/>	
								<button class="have">已完成</button>
							</if>
						</div>-->

						<div class="item flex juscbtween">
							<div class="left">
								<h4>个人推广收益</h4>
								<div class="progressBox flex alitemCenter">
									<div class="progress">
										<p style="max-width:100%;width:<php>echo $info['after_4'] / 500 * 100;</php>%"></p>
									</div>
									<span>{$info.after_4}/500（元）</span>
								</div>
							</div>

							<if condition="$info.after_4 lt 500">
								<a href="/"><button class="nohave">去分享</button></a>
							<else/>	
								<button class="have">已完成</button>
							</if>
						</div>

					</div>
				</div>

				<elseif condition="$info.grade eq 4"/>

					<div class="memberContent">
					<h3>会员权益</h3>
					<div class="rightsContent">
						<table>
							<thead>
								<tr>
									<th></th>
									<th>顾问</th>
									<th>星级顾问</th>
									<th>联合创始人</th>
								</tr>
							</thead>
							<tbody>
								<tr>
									<td align="left">自购返利</td>
									
									<foreach name="$info.line_1" item="vo">
										<if condition ="$vo eq 1">
											<td><img src="__TMPL__/home/public/assets/img/member/iconHave.png" alt=""></td>
										<else />	
											<td><img src="__TMPL__/home/public/assets/img/member/iconNohave.png" class="smail" alt=""></td>
										</if>
									</foreach>		
									
								</tr>
								<tr>
									<td align="left">分享返利</td>
									<foreach name="$info.line_2" item="vo">
										<if condition ="$vo eq 1">
											<td><img src="__TMPL__/home/public/assets/img/member/iconHave.png" alt=""></td>
										<else />	
											<td><img src="__TMPL__/home/public/assets/img/member/iconNohave.png" class="smail" alt=""></td>
										</if>
									</foreach>	
								</tr>
								<tr>
									<td align="left">共学社群</td>
									<foreach name="$info.line_3" item="vo">
										<if condition ="$vo eq 1">
											<td><img src="__TMPL__/home/public/assets/img/member/iconHave.png" alt=""></td>
										<else />	
											<td><img src="__TMPL__/home/public/assets/img/member/iconNohave.png" class="smail" alt=""></td>
										</if>
									</foreach>	
								</tr>
								<tr>
									<td align="left">管理奖励</td>
									<foreach name="$info.line_4" item="vo">
										<if condition ="$vo eq 1">
											<td><img src="__TMPL__/home/public/assets/img/member/iconHave.png" alt=""></td>
										<else />	
											<td><img src="__TMPL__/home/public/assets/img/member/iconNohave.png" class="smail" alt=""></td>
										</if>
									</foreach>	
								</tr>
								<tr>
									<td align="left">培育奖励</td>
									<foreach name="$info.line_5" item="vo">
										<if condition ="$vo eq 1">
											<td><img src="__TMPL__/home/public/assets/img/member/iconHave.png" alt=""></td>
										<else />	
											<td><img src="__TMPL__/home/public/assets/img/member/iconNohave.png" class="smail" alt=""></td>
										</if>
									</foreach>	
								</tr>
								<tr>
									<td align="left">分红奖励</td>
									<foreach name="$info.line_6" item="vo">
										<if condition ="$vo eq 1">
											<td><img src="__TMPL__/home/public/assets/img/member/iconHave.png" alt=""></td>
										<else />	
											<td><img src="__TMPL__/home/public/assets/img/member/iconNohave.png" class="smail" alt=""></td>
										</if>
									</foreach>	
								</tr>
							</tbody>
						</table>
					</div>
					<h3>如何提升收益？</h3>
					<div class="progressList">
						<div class="item flex juscbtween">
							<div class="left">
								<h4 style="margin-bottom: 0;">团队成员越多，收益越多</h4>
							</div>
							<button class="nohave shareMaskShow">去邀请</button>
						</div>
						<div class="item flex juscbtween">
							<div class="left">
								<h4 style="margin-bottom: 0;">团队成员等级越高，收益越多</h4>
							</div>
							<a href="/"><button class="nohave">去分享</button></a>
						</div>
						<div class="item flex juscbtween">
							<div class="left">
								<h4 style="margin-bottom: 0;">团队推荐课程越多，收益越多</h4>
							</div>
							<a href="/"><button class="nohave">去分享</button></a>
						</div>
					</div>
				</div>
				</if>
			</div>
			<div class="inviteFriendMask close">
				<div class="tipTextBox">
					<div class="inviteFriendBox bubbling" id="inviteFriendBox">
						<img src="" alt="" id="backgroundImg">
						<div class="userInfo flex juscbtween">
							<div class="left flex alitemCenter">
								<img src="" alt="" id="userHead">
								<div class="info flex flexdirection">
									<h3 class="userName"></h3>
									<p>邀请您一起育儿育己~</p>
									<!-- <span class="inviteCode" style="white-space: nowrap">邀请码：<i id="inviteCode"></i></span> -->
								</div>
							</div>
							<div class="right">
								<img src="" alt="" id="userCode">
							</div>
						</div>
					</div>
					<div class="tipText">长按海报保存至手机</div>
				</div>
			</div>
			<div class="shareMask close">
				<div class="shareBox flex juscbtween bubbling">
					<div class="shareitem shareUrlButton">
						<img src="__TMPL__/home/public/assets/img/shareUrl.png" alt="">
						<p>分享链接</p>
					</div>
					<div class="shareitem" id="inviteShareButton">
						<img src="__TMPL__/home/public/assets/img/shareDown.png" alt="">
						<p>生成海报</p>
					</div>
				</div>
			</div>
			<!-- 引导分享 -->
			<div class="yindaoShareMask close">
				<img src="__TMPL__/home/public/assets/img/yindaoShareImg.png" alt="">
			</div>
		</div>
	</body>
	<script rel="stylesheet" src="__TMPL__/home/public/assets/js/jquery-2.0.3.min.js"></script>
	<script rel="stylesheet" src="__TMPL__/home/public/assets/js/layer/layer.js"></script>
	<script rel="stylesheet" src="__TMPL__/home/public/assets/js/html2canvas.js"></script>
  	<script rel="stylesheet" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
  	<script rel="stylesheet" src="__TMPL__/home/public/assets/js/base.js"></script>
	<script>
		$(function(){
			//获取海报信息
			function getUserInfo(){
				$.ajax({
					url: '/fx/invite_info',
					type: 'POST',
					data: {},
				}).done(function(res) {
					if(res.code == 200){
						var data = res.data;
						headImg = data.logo;
						$('#backgroundImg').attr('src',data.beijing);
						$('#userHead').attr('src',data.logo);
						$('.userName').html(characterLength(data.nickname,4));
						// $('#inviteCode').html(data.invite);
					}else{
		      			// layer.msg('获取好友信息失败！');
					}
				}).fail(function() {
					layer.msg('获取好友信息失败！');
				})
				$.ajax({
					url: '/fx/invite_code',
					type: 'POST',
					data: {},
				}).done(function(res) {
					if(res.code == 200){
						var data = 'data:image/png;base64,'+res.data;
						$('#userCode').attr('src',data);
					}else{
		      			// layer.msg('获取好友信息失败！');
					}
				}).fail(function() {
					layer.msg('获取好友信息失败！');
				})
			}
			setTimeout(function(){
				getUserInfo();
			},500)
			$('.shareMaskShow').click(function(){
				$('.shareMask').show();
			})
            $('#inviteShareButton').click(function(){
            	$('.shareMask').hide();
    //         	layer.msg('正在生成海报', {
				//   icon: 16,
				//   shade: .5
				// });
				// setTimeout(function(){
				    $('.inviteFriendMask').show();
	            	html2canvas($(".inviteFriendBox")[0],{useCORS:true,scrollY: 0,scrollX: 0}).then(function (canvas) {
				        dataURL =canvas.toDataURL("image/png");
				        console.log(dataURL)
				        $("#inviteFriendBox").html("<img src='"+dataURL+"' style='display:block; width:100%;height:100%' />");
				    });
				// },1000)
            })

		    // 字符长度限制
		    function characterLength(v, n){
		        if(v){
		            const len = v.length;
		            return len > n ? v.substr(0, n) + '...' : v
		        }else{
		            return v;
		        }
		    }

			//隐藏所有弹框
			$('.close').click(function(){
				// $('#userHead').attr('src',headImg);
				$('.inviteFriendMask').hide();
				$('.yindaoShareMask').hide();
				$('.shareMask').hide();
			})
			$('.shareUrlButton').click(function(){
				$('.yindaoShareMask').show();
			})

			//冒泡，禁止点击
			$('.bubbling').click(function(){
				return false;
			})
		})
	</script>
</html>
